<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      :data="query.baseParams"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="label" title="部门名称" :item-render="{}">
        <template #default="{data}">
          <el-input v-model="data.label" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar ref="xToolbar1" custom>
      <template #buttons>
        <vxe-button status="primary" content="新增" @click="showModal('create',{pid:0,seq: treeData.length*10+10})" />
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      row-id="id"
      :loading="tableLoading"
      :column-config="{resizable: true}"
      :data="tableData"
      :tree-config="{transform: true, rowField: 'id', parentField: 'pid',expandAll:true}"
      @sort-change="tableSortChange"
    >
      <vxe-column field="label" title="部门名称" tree-node />
      <vxe-column field="seq" title="排序" />
      <vxe-column field="createTime" title="创建时间" />
      <vxe-column field="updateTime" title="修改时间" />
      <vxe-column field="createByName" title="创建人" />
      <vxe-column field="updateByName" title="修改人" />
      <vxe-column field="op" title="操作">
        <template #default="scope">
          <vxe-button type="text" status="primary" @click="showModal('create',{pid: scope.row.id})">新增</vxe-button>
          <vxe-button type="text" status="primary" @click="showModal('update',scope.row)">编辑</vxe-button>
          <vxe-button v-if="!(scope.row.children && scope.row.children.length>0)" status="danger" type="text" @click="deleteTableRow(scope.row.id)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />

  </div>
</template>

<script>
import Api from '@/api/upms/dep'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
import { pidToChildren } from '@/utils/tree'
export default {
  name: 'OrgDep',
  components: { CreateDialog, UpdateDialog },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          pid: '',
          label: ''
        },
        page: {
          pageSize: -1
        },
        sort: 'seq asc'
      },
      dialogs: {
        create: {
          formData: {

          }
        }
      }
    }
  },
  computed: {
    treeData() {
      return pidToChildren(this.tableData, {})
    }
  },
  watch: {
    tableData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.$refs.xTable.setAllTreeExpand(true)
        })
      }
    }
  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {
    modifySuccess(row) {

    }
  }
}
</script>

<style>

</style>
